<style lang="scss" scoped>
div {
    box-sizing: border-box;
}



.title {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding-left: 10px;
    color: #000;
    background-color: #88919b;
    display: flex;
    justify-content: space-between;
    align-items: center;

    i {
        width: 32px;
    }
}

.stopLossOpen {
    background-color: #88919b;
    padding: 0 2px;
    height: 249px;

    .box {
        padding: 8px 14px;
        background-color: #f0f0f0;
        color: #000;

        .data {
            display: flex;
            justify-content: space-between;

            .heyue {
                flex: 0.7
            }

            .pan_ko {
                display: flex;
                justify-content: space-between;
                flex: 0.28;
                margin-right: 20px;

                .zhang {
                    color: red;
                    font-weight: 600;

                    span {
                        color: #000;
                    }
                }

                .die {
                    color: green;
                    font-weight: 600;

                    span {
                        color: #000;
                    }
                }
            }

        }

        .info {
            margin: 20px 10px;
            height: 23px;
            border-bottom: 1px solid #a0a0a0;
            padding-left: 20px
        }

        .xia_dan {
            display: flex;
            justify-content: space-evenly;
            margin-top: 34px;

            .buySell {
                width: 90px;
                height: 24px;
                display: flex;
                background-color: #d7e3f1;

                .active {
                    color: #fff;
                    background-color: #448ac5;
                }
                .active2{
                    background-color: #c74547;
                }

                &>div {
                    flex: 1;
                    text-align: center;
                    line-height: 24px;
                }
            }

            .vol {
                flex: 0.18;
            }

            .profit {
                flex: 0.24;
            }

            .loss {
                flex: 0.24;
            }

            .xiaBtn {
                background-color: #c74547;
                color: #fff;
                flex: 0.26;
                line-height: 25px;
                height: 25px;
                text-align: center;
            }

            .s_cont {
                height: 25px;
                width: 100%;
            }

            &>div {
                position: relative;

                .tip {
                    position: absolute;
                    top: -16px;
                    left: 0;
                    width: 100%;
                    font-size: 11px;
                    color: #000;
                }
            }

        }
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
    /* 始终显示箭头 */
}

/* 针对 Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    /* 让箭头始终显示 */
}

.tishi {
    line-height: 25px;

    .t_tit {
        padding-top: 10px;
    }
}
</style>

<template>
    <div class="stopLossOpen">
        <div class="title">
            <span>止盈止损开仓</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-stopLossOpen')"></i>
        </div>
        <div class="box">
            <div class="data">
                <div class="heyue">合约 {{ shangpinInfo.heyue_name }}</div>
                <div class="pan_ko">
                    <div class="zhang">涨板 <span>{{ shangpinInfo?.buy1 }}</span></div>
                    <div class="die">跌板 <span>{{ shangpinInfo?.buy1 }}</span></div>
                </div>

            </div>
            <div class="info">
            </div>
            <div class="xia_dan">
                <div class="buySell">
                    <div class="buy" :class="{ active: active == 1 }" @click="active = 1">买</div>
                    <div class="sell" :class="{ active2: active == 2 }" @click="active = 2">卖</div>
                </div>
                <div class="profit">
                    <div class="tip">止盈点数</div>
                    <input type="number" class="s_cont" v-model="ying" />
                </div>
                <div class="loss">
                    <div class="tip">止损点数</div>
                    <input type="number" class="s_cont" v-model="sun" />
                </div>
                <div class="xiaBtn" @click="xiadan">下单（{{ active == 1 ? '买' : '卖' }}开仓）</div>
            </div>
            <div class="tishi">
                <div class="t_tit">提示：</div>
                <div>1、止损开仓是在挂单列表生成一条止损预备单，内容可在挂单列表修改。</div>
                <div>2、止损预备单在委托成交后会自动转换未损盈单，止损预备单在云端运行，软件关闭依然有效。</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
// import { ElMessage } from 'element-plus';

const { ipcRenderer } = require('electron');
const shangpinInfo = ref({})
const active = ref(1)
const ying = ref(0)
const sun = ref(0)



ipcRenderer.on("show-stopLossOpen", (e, v) => {
    shangpinInfo.value = JSON.parse(v)
})
function xiadan() {
    ipcRenderer.send('placeAnOrderWindow_click_msg', { type: '损盈下单', active: active.value, ying: ying.value, sun: sun.value })
    ying.value = 0
    sun.value = 0
}

</script>
